<template>
  <el-card style="min-height: 80vh;" >
    
    <my-table path="/course" :cols="cols" :formObj="form" :tableAttrs="tableAttrs" :rules="rules" :pageSize="pageSize"
      :pageParams="pageParams">
      <template v-slot:form>
        <el-form-item label="课时名" prop="name" style="padding: 0 5px;">
          <el-input v-model="form.name" placeholder="课时名" clearable></el-input>
        </el-form-item>
        <el-form-item label="课时数" prop="classHour">
          <el-input v-model="form.classHour" placeholder="课时数" clearable></el-input>
        </el-form-item>
      </template>
    </my-table>
  </el-card>
</template>

<script>
  import myTable from '../components/myTable.vue';
  export default {
    components: {
      myTable
    },
    data() {
      var validateCodeO = (rule, value, callback) => {
        var re = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
        let reT = /^.{2,10}$/;
        var reF = /^\d+$/;
        if (!re.test(value)) {
          callback(new Error('请输入中文、英文、数字但不包括下划线等符号!'));
        } else if (!reT.test(value)) {
          callback(new Error('课程名称至少有2个字符，至多10个字符！'));
        } else if (reF.test(value)) {
          callback(new Error('课程名不能为纯数字'));
        } else {
          callback();
        }
      };
      var validateCodeT = (rule, value, callback) => {
        var re = /^\d+$/;
        let reT = /^(\d{1,2}|1\d{2}|200)$/;
        if ((!re.test(value)) || (!reT.test(value))) {
          callback(new Error('课时数是能是0-200的整数'));
        } else {
          callback();
        }
      };
      return {

        cols: [{
            property: 'name',
            label: '课程名',
          },
          {
            property: 'classHour',
            label: '课时数'
          }
        ],
        tableAttrs: {
          border: true
        },
        form: {
          name: '',
          classHour: '',
        },
        //对话框
        rules: {
          name: [{
              required: true,
              message: '课时名必填',
              trigger: 'blur'
            },
            {
              validator: validateCodeO,
              trigger: "blur"
            }

          ],
          classHour: [{
            required: true,
            message: '课时数必填',
            trigger: 'blur'
          }, {
            validator: validateCodeT,
            trigger: "blur"
          }],
        },
        pageSize: [10, 20, 30, 50],
        pageParams: {
          limit: 10
        }
      }
    },
  }
</script>

<style>
</style>
